<template>
  <div class="taskParticulars" v-if="taskData && batchData" id="taskParticulars" @touchstart="operateCommmentInit">
    <div class="commentHead" :style="{'background-image' : 'url('+ batchData.type_banner +')'}" v-if="batchData.type_banner && taskState !== '1'">
      <div class="headMask"></div>
      <div class="headContent">
        <div class="headLeft">
          <img :src="batchData.type_referral" mode="aspectFill" lazy-load>
        </div>
        <div class="headRight">
          <div>悦器社{{batchData.total_day}}天吉他训练营</div>
          <div>
            <p>{{batchData.apply_sum}}人参加</p>
            <p></p>
            <p>{{batchData.sign_in}}次打卡</p>
          </div>
          <div>
            <p>{{batchData.teacher_name}}老师</p>
            <!-- <p>
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fmore_01%402x.png" lazy-load>
            </p> -->
          </div>
        </div>
      </div>
    </div>

  
    <div class="commentCell" id="commentCell">
      <div class="cellLeft">
        <div class="cellIcon">
          <img :src="taskData.avatarUrl" lazy-load>
        </div>
      </div>
      <div class="cellRight">
        <div class="cellName">{{taskData.nickName}}</div>
        <div class="cellTime">{{taskData.create_time}}·已交作业{{taskData.sign_in}}次</div>
        <div class="cellContent" v-for="(itemContent, indexContent) in taskData.content" :key="indexContent">
          <div class="contentText" v-if="itemContent.status === 0">{{itemContent.content}}</div>
          <div class="contentMedia" v-if="itemContent.status === 1 && itemContent.state === 0">
            <scroll-view class="mediaList" scroll-x style="width: auto;overflow:hidden;transform:translateZ(1px)">
              <div class="mediaCell" v-for="(itemMedia, indexMedia) in itemContent.content" :key="indexMedia" 
                :style="{'background-image' : itemMedia.status === 10? 'url(http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_capture_square%402x.png)': 'url('+ itemMedia.content +')'}" 
                @click="previewImageList(itemMedia, itemContent.content)">
                  <div class="videoBtn" v-if="itemMedia.status === 10">
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_play%402x.png" lazy-load>
                  </div> 
              </div>
            </scroll-view>
          </div>
          <div class="contentVideo" v-if="itemContent.status === 1 && itemContent.state === 1">
            <div class="videoBox" v-for="(itemMedia, indexMedia) in itemContent.content" :key="indexMedia" @click="transmitMovies(itemMedia)">
              <!-- <img :src="itemMedia.content" mode="aspectFill"> -->
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_capture%402x.png" mode="aspectFill">
              <div class="videoBtn">
                <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_play%402x.png" lazy-load>
              </div>   
            </div>
          </div>
          <div class="contentAudio" v-if="itemContent.status === 2">
            <audioModule :audioData="itemContent" @audioeNotice="audioeMeans"></audioModule>
          </div> 
        </div>
        <div class="cellDiscuss">
          <div class="discussButton" @click.stop.prevent="operateCommmentDiscuss(taskData.job_id)" v-if="taskState === '1'">
            <div class="discussIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fcomments%402x.png" lazy-load>
            </div>
            <div class="discussText">评论</div>
          </div>
          <div class="opinionButton" @click.stop.prevent="operateCommmentOpinion(taskData)" v-if="superuserFlag === '1'">
            <div class="opinionIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fcomment%402x.png" lazy-load>
            </div>
            <div class="opinionText">点评</div>
          </div>
          <!-- <div class="shareButton" @click.stop.prevent="operateCommmentShare(taskData)">
            <div class="shareIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fshare%402x.png" lazy-load>
            </div>
            <div class="shareText">分享</div>
          </div> -->
          <div class="teacherReviews" v-if="taskData.teach" @click.stop.prevent="operateOpinionReply(taskData)">
            <span class="teacherName">{{taskData.teacher_name}}</span>点评：<span class="reviewsText">{{taskData.teach}}</span>
          </div>
          <div class="commentContent" v-if="taskData.comment && taskData.comment.length !== 0">
            <div class="commentLine" v-for="(itemLine, indexLine) in taskData.comment" :key="indexLine" @click.stop.prevent="operateCommmentReply(itemLine)">
              <div class="discussLine" v-if="itemLine.to_uid === itemLine.from_id">
                <span>{{itemLine.to_name}}：</span>{{itemLine.back_comment}}
              </div>
              <div class="replyLine" v-if="itemLine.to_uid !== itemLine.from_id">
                <span>{{itemLine.to_name}} </span>回复<span>{{itemLine.from_name}}：</span>{{itemLine.back_comment}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- {{taskParticularsHeight-keyboardHeight-commentReleaseHeight}}  {{taskParticularsHeight}} {{keyboardHeight}} {{commentReleaseHeight}} -->
    <!-- :style="{bottom:  (keyboardHeight) + 'px'}" -->
    <div class="commentRelease" v-if="showField" id="commentRelease" :style="{top:  (taskParticularsHeight) + 'rpx'}">
      <input class="text"
        placeholder-class="input_null"  
        maxlength="-1"
        cursor-spacing="10" 
        :focus="spotlight"
        adjust-position="false"
        :placeholder="releaseText" 
        v-model="commmentText" @confirm="operateCommmentPublish" @focus="monitorCommmentFocus($event)" @blur="monitorCommmentBlur">   
      <div class="submit" @click.stop.prevent="operateCommmentPublish">发送</div>
    </div>

    <div class="commentFoot" @click.stop.prevent="goToMiniIndex" v-if="taskState !== '1'">我也要加入悦器社</div>
    <!-- <div class="commentFoot" v-if=" userFlag && timeFlag && taskData.clock_state !== '1'"> -->
    <div class="commentFoot" v-if="taskData.clock_in" @click.stop.prevent="showShareModel = true">
      <!-- <form @submit="formSubmit($event)" report-submit>
        <button formType="submit" class="form-btn"> -->
          打卡
        <!-- </button>
      </form> -->
    </div>
    <!-- <button class="commentFoot" open-type="contact" session-from="weapp" v-if=" userFlag && timeFlag && taskData.clock_state === '1'">打卡</button> -->

    <cover-view class="shareModel" v-if="showShareModel">
      <cover-view class="shareMask" @click.stop.prevent="showShareModel = !showShareModel"></cover-view>
      <cover-view class="shareContent">
        <cover-view class="shareTitle">分享请回复数字“1”</cover-view>
        <cover-view class="shareSpace"></cover-view>
        <button class="shareButton" open-type="contact" :session-from="taskData.job_id" @click.stop.prevent="contactShare">确定</button>
      </cover-view>
    </cover-view>

    <cover-view class="opinionModel" v-if="showOpinionModel">
      <cover-view class="opinionMask" @click.stop.prevent="showOpinionModel = !showOpinionModel"></cover-view>
      <cover-view class="opinionContent">
        <cover-view class="opinionTitle">已经点评过作业，是否要覆盖？</cover-view>
        <cover-view class="opinionSpace"></cover-view>
        <cover-view class="opinionDivide">
          <cover-view class="cancelDivide" @click.stop.prevent="initOpinionModal">取消</cover-view>
          <cover-view class="divideSpace"></cover-view>
          <cover-view class="ensureDivide" @click.stop.prevent="proceedOpinion">确定</cover-view>
        </cover-view>
      </cover-view>
    </cover-view>

    <!-- <cover-view class="releaseModel">
      <cover-view class="releaseMask"></cover-view>
      <cover-view class="releaseContent">
        <input class="text"
          placeholder-class="input_null"  
          maxlength="-1"
          cursor-spacing="15" 
          focus="false"
          adjust-position="false"
          :placeholder="releaseText" 
          v-model="commmentText" @confirm="operateCommmentPublish">   
        <div class="submit" @click.stop.prevent="operateCommmentPublish">发送</div>
      </cover-view>
    </cover-view>     -->
  </div>
</template>

<script>
import {obtainTaskParticulars, releaseCommmentContent, removeCommmentContent, releaseCommmentOpinion, saveStudentFormId} from '@/config/api'
import {dateRegExp, commentRegExp} from '@/config/mUtils'
import {showMessager, showPictureCard} from '@/config/wUtils'
import audioModule from '@/components/audio'
export default {
  components:{audioModule},
  data () {
    return {
      // 作业详情
      taskData: [],
      // 批次详情
      batchData: [],

      // 显示输入框
      showField: false,
      // 评论 文本
      commmentText: '',
      // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
      commentStatus: 0,
      // 评论 数据包
      commentPacket: {},
      // 提示 文本
      releaseText: '',

      // 页面状态
      taskState: '',
      // 显示 打卡标识
        // 用户标识 
      userFlag: false,
        // 时间标识
      timeFlag: false,

      // 显示 分享model
      showShareModel: false,

      // 聚焦
      spotlight: false,
      // 显示 点评model
      showOpinionModel: false,
      // 超级用户 标识
      superuserFlag: '',
      // 作业 内容
      courseTaskItem: {},

      // 内容高度
      taskParticularsHeight: 0,
      // 键盘高度
      keyboardHeight: 300,
      // 输入框高度
      commentReleaseHeight: 0,
      // 定位 方式
      orientateMode: 'fixed',

      taskParticularsPlace: 0,
    }
  },
  watch: {
    showField: {
        handler(val){
          let self = this
          console.log(val, "深度监听")
          self.$nextTick(() => {
            if (val) {
              console.log(self.keyboardHeight, '....键盘高度')
              wx.createSelectorQuery().select('#taskParticulars')
                .boundingClientRect(function(rect){
                  console.log(rect, '....taskParticulars.......rect')
                  if(rect) {
                    // 内容高度
                    self.taskParticularsHeight = rect.height
                  }
                 
                  

                  wx.createSelectorQuery().select('#commentRelease')
                    .boundingClientRect(function(rect){
                      console.log(rect, '....commentRelease.......rect')
                      if (rect) {
                        // 输入框高度
                        self.commentReleaseHeight = rect.height
                        // 聚焦
                        self.spotlight = true
                      }
                      
                    }).exec() 
                  // 
                  // setTimeout(() => {
                  //   // 使页面滚动到底部
                  //   wx.pageScrollTo({
                  //     scrollTop: 0,
                  //     duration: 200
                  //   }) 
                  //   // 聚焦
                  //   self.spotlight = true
                  // }, 500)
              }).exec() 
            } else {
              setTimeout(() => {
                console.log('......false 深度监听', self.spotlight)
                // 操作评论 --- 初始化
                self.operateCommmentInit()
              }, 500)
            }
          })
        },
        deep:true
    },
    keyboardHeight: {
      handler(val){
          let self = this
          console.log(val, "深度监听.............................")
          self.$nextTick(() => {
            self.taskParticularsPlace = val
          })
      }
    }
  },
  mounted () {
    let self = this
    // 初始化 作业详情界面
    self.initTaskParticulars();
  },
  methods: {
    // 初始化 作业详情界面
    initTaskParticulars(){
        let self = this;
        console.log(self.$root.$mp.query.task_state === '1', '......this.$root.$mp.query')
        if(self.$root.$mp.query.job_id && self.$root.$mp.query.task_state){
          // 页面状态
          self.taskState = self.$root.$mp.query.task_state
          // 隐藏转发按钮
          wx.hideShareMenu()
          // 获取 作业详情 数据
          self.acquireTaskParticularsData()
          // 超级用户 标识
          self.superuserFlag = wx.getStorageSync('super_user')
        }
    },
    
    // 获取 作业详情 数据
    async acquireTaskParticularsData () {
      let self = this
      wx.showNavigationBarLoading()
      // 本地用户信息
      let userInfo = await wx.getStorageSync('userInfo')
      // 显示 分享model
      self.showShareModel = false
      let taskInfo = await obtainTaskParticulars(self.$root.$mp.query.job_id, userInfo.openId, userInfo.unionId)
      if (taskInfo.status === 200) {
        // 评论时间
        taskInfo.data.create_time = commentRegExp ((taskInfo.data.create_time-0))
        // 作业数据
        self.taskData = taskInfo.data
        // 批次数据
        self.batchData = taskInfo.info
        // // 评论时间
        // self.taskData.create_time = commentRegExp ((self.taskData.create_time-0))

        

        console.log(userInfo.unionId, '....userInfo.unionId')
        console.log(self.taskData.union_id, '.....self.taskData.union_id')
        
        // // 判断是否是 用户自己
        // if(userInfo.openId === self.taskData.open_id) {
        //   // 显示 打卡标识
        //     // 用户标识 
        //   self.userFlag = true
        // } else {
        //   // 显示 打卡标识
        //     // 用户标识 
        //   self.userFlag = false
        // }

        // 判断是否是 用户自己
        if(userInfo.unionId === self.taskData.union_id) {
          // 显示 打卡标识
            // 用户标识 
          self.userFlag = true
        } else {
          // 显示 打卡标识
            // 用户标识 
          self.userFlag = false
        }


        // 判断是否是  当天时间
        const create_time = new Date().getTime()
        console.log(dateRegExp ((self.batchData.course_time - 0), 'yyyy年MM月dd日'), '......start_time')
        console.log(dateRegExp ((create_time - 0), 'yyyy年MM月dd日'), '......create_time')
        if (dateRegExp ((self.batchData.course_time - 0), 'yyyy年MM月dd日') === dateRegExp ((create_time - 0), 'yyyy年MM月dd日')) {
          // 显示 打卡标识
            // 时间标识
          self.timeFlag = true
        } else {
          // 显示 打卡标识
            // 时间标识
          self.timeFlag = false
        }

        console.log(self.userFlag, '......userFlag')
        console.log(self.timeFlag, '......timeFlag')
        console.log(self.taskData.clock_state !== '1', '......taskData.clock_state !== 1')
      }
      console.log(taskInfo, '....课程详情')
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },

    // 发布 评论 -- 内容
    async publishCommmentContent () {
      let self = this;
      console.log('...enter')
      wx.showNavigationBarLoading()
      let commmentInfo = await releaseCommmentContent(self.commentPacket.job_id, self.commentPacket.to_uid, self.commentPacket.from_id, self.commmentText)
      if (commmentInfo.status === 200) {
        // self.$emit("commentNotice");
        // 初始化 作业详情界面
        self.initTaskParticulars();
        // 操作评论 --- 初始化
        self.operateCommmentInit()
      }else{
        showMessager(commmentInfo.msg)
      }
      console.log(commmentInfo, '....评论内容')
      wx.hideNavigationBarLoading()
    },

    // 删除 评论 -- 内容
    async cancelCommmentContent (item) {
      let self = this;
      wx.showNavigationBarLoading()
      let commmentInfo = await removeCommmentContent(item.to_uid, item.comment_id)
      if (commmentInfo.status === 200) {
        // self.$emit("commentNotice");
        // 初始化 作业详情界面
        self.initTaskParticulars();
        showMessager('删除成功')
      }
      console.log(commmentInfo, '....评论内容')
      wx.hideNavigationBarLoading()
    },

    // 发布 评论 -- 点评
    async publishOpinion () {
      let self = this;
      console.log(self.commentPacket, '.............')
      wx.showNavigationBarLoading()
      let commmentInfo = await releaseCommmentOpinion(self.commentPacket.job_id, self.commentPacket.to_uid,  self.commmentText)
      if (commmentInfo.status === 200) {
        // self.$emit("commentNotice");
        // 初始化 作业详情界面
        self.initTaskParticulars();
        // 操作评论 --- 初始化
        self.operateCommmentInit()
      }else{
        showMessager(commmentInfo.msg)
      }
      console.log(commmentInfo, '....点评内容')
      wx.hideNavigationBarLoading()
    },
  
    // 展示 图片列表
    previewImageList(item, itemList) {
      let self = this;
      if (item.status === 11){
        let imageList = []
        itemList.forEach( (itemCell, index) => {
          console.log(itemCell, '......展示图片列表')
          if (itemCell.status === 11) {
            imageList.push(itemCell.content)
          }
        });
        showPictureCard(item.content, imageList)
      }else{
        // 播放 视频
        self.transmitMovies (item)
      }
    },
    // 播放 视频
    transmitMovies (item) {
      let self = this;
      console.log('播放 视频', item)
      // self.$emit("commentVideo", item);
      if (item) {
        wx.navigateTo({
          url: '../commentVideo/main?comment_video='+item.url
        })
      }
    },
    // 初始化 多媒体
    initMultimedia(){
      let self = this;
      // 评论 多媒体
      // if (self.commentData) {
      //   self.commentData.forEach((itemComment, indexComment) => {
          self.taskData.content.forEach((itemContent, indexContent) => {
            if (itemContent.status === 1) {
              itemContent.content.forEach((itemMedia, indexMedia) => {
                if (itemMedia.status === 10) {
                  itemMedia.play = 0
                }
              } )
            }
            if(itemContent.status === 2){
              itemContent.play = 0
            }
          })  
      //   })
      // }
    },
    // audio组件 触发的方法
    audioeMeans (item) {
      let self = this;
      if (!item.play) {
        // 初始化 多媒体
        self.initMultimedia()
        item.play = 1
        console.log(item, self.taskData, '....audio组件')
      } else {
        // 初始化 多媒体
        self.initMultimedia()
      }
    },

    // 操作评论 --- 初始化
    operateCommmentInit () {
      console.log('操作评论 --- 初始化')
      let self = this;
      // setTimeout(() => {
        // 显示输入框
        self.showField = false
        // 评论 文本
        self.commmentText = ''
        // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
        self.commentStatus = 0
        // 评论 数据包
        self.commentPacket = {}
        // 聚焦
        self.spotlight = false
      // }, 200) 
    },
    // 初始化 评论modal框
    initOpinionModal () {
      let self = this;
      // 显示 点评model
      self.showOpinionModel = false
      // 作业 内容
      self.courseTaskItem = {}
    },
    // 进行评论
    proceedOpinion () {
      let self = this;
      console.log('进行评论')
      // 显示 点评model
      self.showOpinionModel = false
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 提示文本
      self.releaseText = '点评 '
      // 显示输入框
      self.showField = true
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      self.commentStatus = 2
      // 评论 数据包
      self.commentPacket = {
        job_id: self.courseTaskItem.job_id,
        to_uid: wx.getStorageSync('student_id')
      }
    },
    // 操作评论 --- 点评
    operateCommmentOpinion (item) {
      let self = this;
      if(self.showField){
        // 显示输入框
        self.showField = false
        return;
      }
      // 作业 内容
      self.courseTaskItem = item
      if (item.teach) {
        // 显示 点评model
        self.showOpinionModel = true
        return;
      } else {
        // 显示 点评model
        self.showOpinionModel = false
        // 进行评论
        self.proceedOpinion ()
      }
    },
    // 操作评论 --- 评论
    operateCommmentDiscuss (jobId) {
      console.log('操作评论 --- 评论')
      let self = this;
      if(self.showField){
        // 显示输入框
        self.showField = false
        return;
      }
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 提示文本
      self.releaseText = '评论 '
      // 显示输入框
      self.showField = true
      // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
      self.commentStatus = 0
      // 评论 数据包
      self.commentPacket = {
        job_id: jobId,
        to_uid: wx.getStorageSync('student_id'),
        from_id: wx.getStorageSync('student_id')
      } 
    },

    // 操作评论 --- 分享
    operateCommmentShare (item) {
      let self = this;
      console.log('操作评论 --- 分享', item)
      self.$emit("commentShare", item);
      // // 显示 分享model
      // self.showShareModel = true;
    },

    // 操作点评 --- 回复
    operateOpinionReply (item) {
      let self = this;
      console.log(item, '.....操作点评 --- 回复')
      // 页面状态
      if (self.taskState !== '1') {
        return;
      }
      if (wx.getStorageSync('student_id') === item.teacher_id) {
        showMessager('不可回复自己的点评')
        return;
      }
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 提示文本
      self.releaseText = '回复 '
      // 显示输入框
      self.showField = true
      // 评论 状态  0 -- 评论   1 -- 回复   2 -- 点评
      self.commentStatus = 1
      // 评论 数据包
      self.commentPacket = {
        job_id: item.job_id,
        to_uid: wx.getStorageSync('student_id'),
        from_id: item.teacher_id
      } 
    },
    // 操作评论 --- 回复
    operateCommmentReply (item) {
      let self = this;
      console.log(self.showField, '....显示输入框')
      // 页面状态
      if (self.taskState !== '1') {
        return;
      }
      if(self.showField){
        // 显示输入框
        self.showField = false
        return;
      }
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      // 判断 是 回复 or 删除
      if (wx.getStorageSync('student_id') !== item.to_uid) {
        // 提示文本
        self.releaseText = '回复 '
        // 显示输入框
        self.showField = true
        // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
        self.commentStatus = 1
        // 评论 数据包
        self.commentPacket = {
          job_id: item.job_id,
          to_uid: wx.getStorageSync('student_id'),
          from_id: item.to_uid
        } 
      }else{
        wx.showActionSheet({
          itemList: ['删除'],
          itemColor: '#ee3a29',
          success: function(res) {
            console.log(res.tapIndex)
            if (res.tapIndex === 0){
              // 操作评论 --- 删除
              self.operateCommmentDelete(item)
            }
          },
          fail: function(res) {
            console.log(res.errMsg)
          }
        })
      }
    },
    // 操作评论 --- 删除
    operateCommmentDelete (item) {
      let self = this;
      // 页面状态
      if (self.taskState !== '1') {
        return;
      }
      // 操作评论 --- 初始化
      self.operateCommmentInit()
      console.log(item, '操作评论 --- 删除')
      // 删除 评论 -- 内容
      self.cancelCommmentContent (item)
    },
    // 操作评论 --- 发布
    operateCommmentPublish () {
      let self = this;
      // 评论 文本
      if (self.commmentText) {
        // // 发布 评论 -- 内容
        // self.publishCommmentContent ()
        // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
        if (self.commentStatus === 0 || self.commentStatus === 1) {
          // 发布 评论 -- 内容
          self.publishCommmentContent ()
        }
        if (self.commentStatus === 2) {
          // 发布 评论 -- 点评
          self.publishOpinion ()
        }
      }else{
        // 评论 状态  0 -- 评论   1 -- 回复  2 -- 点评
        if (self.commentStatus === 1) {
          showMessager('请填写回复内容')
        }else{
          showMessager('请填写评论内容')
        }
      }
    },
    // 监听 输入框 获取聚焦 状态
    monitorCommmentFocus (e) {
      let self = this;
      // 键盘高度
      self.keyboardHeight = e.mp.detail.height
      // 定位 方式
      self.orientateMode = 'static'
      // setTimeout(() => {
      //   // 聚焦
      //   self.spotlight = true
      // }, 500)
      console.log(e.mp.detail.height, '监听 输入框聚焦 状态')
    },
    // 监听 输入框 失去聚焦 状态
    monitorCommmentBlur () {
      let self = this;
      // 显示输入框
      // self.showField = false
      // 键盘高度
      // self.keyboardHeight = 0
      // 定位 方式
      self.orientateMode = 'fixed'
    },
    // 跳转到 小程序首页
    goToMiniIndex () {
      let self = this;
      wx.navigateTo({
        url: '../index/main'
      })
    },
    // 确定跳转客服进行分享
    contactShare () {
      let self = this;
      console.log('确定跳转客服进行分享')
      // 获取 作业详情 数据
      self.acquireTaskParticularsData()
    },
    // 保存用户 消息提示id
    async formSubmit (e) {
        let self = this; 
        // 显示 分享model
        self.showShareModel = true
        // 用户信息数据
        const userData = wx.getStorageSync('userInfo')
        // // 保存用户点击的formid
        // await saveStudentFormId(userData.openId, e.target.formId)
    },
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this
    // 初始化 多媒体
    self.initMultimedia()
    // 初始化 作业详情界面
    self.initTaskParticulars();
  },
  // 滚动界面
  onPageScroll (res) {
    let self = this;
    // // 操作评论 --- 初始化
    // self.operateCommmentInit()
    // console.log(res, '.........滚动界面')
    // wx.pageScrollTo({
    //   scrollTop: 0,
    //   duration: 50
    // })
  },
  // 页面加载
  onLoad () {
    let self = this; 
    // 获取 作业详情 数据
    self.acquireTaskParticularsData()
  },
  // 页面展示
  onShow () {
    let self = this;
    console.log('页面展示')
    // // 作业详情
    // self.taskData = []
    // // 批次详情
    // self.batchData = []
    // 获取 作业详情 数据
    self.acquireTaskParticularsData()
    // 操作评论 --- 初始化
    self.operateCommmentInit()
  },
  // 分享
  onShareAppMessage (res) {
    let self = this;
    // 分享 数据
      // self.shareData = item
    console.log(res, self.shareData, '...........分享......')
    // 显示 分享model
    if (self.showShareModel) {
      if (res.from === 'button') {
        // 来自页面内转发按钮
        console.log(res.target)
      }
      return {
        title: self.shareData.nickName+' 的作业日记',
        imageUrl: self.shareData.avatarUrl,
        path: '/pages/courseParticulars/main'
      }
    }
  }
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.taskParticulars{
  width: 100%;
  height: 110%;
  background: #ffffff;
  // position: relative;
  form {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    .form-btn {
        width: 100%;
        height: 100%;
        border:none;
        text-align:left;
        padding:0;
        margin:0;
        background-color: transparent;

        text-align: center;
        height: 98rpx;
        line-height: 98rpx;
        background-image: linear-gradient(-90deg, #FFB497 0%, #FE7A72 100%);

        font-family: PingFangSC-Regular;
        font-size: 34rpx;
        color: #FFFFFF;
        letter-spacing: -0.66rpx;
        border-radius:0;
        &::after {
            border: none;
        }
    }
  }
  .commentHead{
    width: 100%;
    height: 200rpx;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    // position: relative;
    margin-bottom: 5rpx;
    .headMask{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #000;
      opacity: 0.7;
    }
    .headContent{
      position: absolute;
      top: 35rpx;
      left: 35rpx;
      .headLeft{
        display: inline-block;
        vertical-align: top;
        width: 180rpx;
        height: 130rpx;
        border-radius: 8rpx;
        overflow: hidden;
        img{
           width: 100%;
           height: 100%;
        }
      }
      .headRight{
        display: inline-block;
        vertical-align: top;
        margin-left: 40rpx;
        div{
          font-size: 0;
          line-height: 1;
          &:nth-child(1){
              font-family: ChalkboardSE-Regular;
              font-size: 30rpx;
              color: #FFFFFF;
              margin-bottom: 14rpx;
              height: 42rpx;
              line-height: 42rpx;
              letter-spacing: 0.61rpx;
          }
          &:nth-child(2){
            margin-bottom: 8rpx;
            p{
              display: inline-block;
              vertical-align: middle;
              &:nth-child(1){
                font-family: PingFangSC-Regular;
                font-size: 24rpx;
                color: #CCCCCC;
                letter-spacing: 0.61rpx;
                // min-width: 130rpx;
                height: 33rpx;
                line-height: 33rpx;
              }
              &:nth-child(2){
                border-left: 2rpx solid #CCCCCC;
                margin-left: 15rpx;
                height: 22rpx;
                line-height: 22rpx;
                padding-right: 15rpx;
              }
              &:nth-child(3){
                font-family: PingFangSC-Regular;
                font-size: 24rpx;
                color: #CCCCCC;
                letter-spacing: 0.61rpx;
                height: 33rpx;
                line-height: 33rpx;
              }
            }
          }
          &:nth-child(3){
            p{
              display: inline-block;
              vertical-align: middle;
              &:nth-child(1){
                font-family: PingFangSC-Regular;
                font-size: 24rpx;
                color: #CCCCCC;
                letter-spacing: 0.61rpx;
                height: 33rpx;
                line-height: 33rpx;
              }
              &:nth-child(2){
                width: 8rpx;
                height: 16rpx;
                line-height: 16rpx;
                margin-left: 10rpx;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }  
          }
        }
      }
    }

  }
  
  .commentCell{
      // margin-bottom: 25rpx;
      padding: 25rpx 32rpx 25rpx 32rpx;
      // border-bottom: 1rpx solid #EAEAEA;
      &:last-child{
        border-bottom: none;
      }
      .cellLeft{
        display: inline-block;
        vertical-align: top;
        .cellIcon{
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 20rpx;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .cellRight{
        display: inline-block;
        vertical-align: top;
        width: 586rpx;
        padding-top: 10rpx;
        .cellName{
          font-family: PingFangSC-Medium;
          font-size: 30rpx;
          color: #666666;
          letter-spacing: 0.61px;
          line-height: 1;
          // height: 42rpx;
          // line-height: 42rpx;
          width: 80%;
          white-space: nowrap;
          overflow: hidden;
          /* 文本超出变省略号 */
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .cellTime{
          font-family: PingFangSC-Regular;
          font-size: 22rpx;
          color: #999999;
          letter-spacing: 0.7rpx;
          line-height: 1;
          margin-top: 13rpx;
          // height: 30rpx;
          // line-height: 30rpx;
        }
        .cellContent{
          .contentText{
            font-family: PingFangSC-Regular;
            font-size: 30rpx;
            color: #333333;
            letter-spacing: 0.61rpx;
            line-height: 42rpx;
            margin-top: 20rpx;
          }
          .contentMedia{
            height: 188rpx;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 20rpx;
            .mediaList {
              font-size: 0;
              .mediaCell {
                  display: inline-block;
                  width: 188rpx;
                  height: 188rpx;
                  position: relative;
                  border-radius: 10rpx;
                  background-repeat: no-repeat;
                  background-position: center center;
                  background-size: cover;
                  position: relative;
                  & + .mediaCell {
                      margin-left: 10rpx;
                  }
                  .time {
                      position: absolute;
                      bottom: 0;
                      width: 100%;
                      font-family: PingFangSC-Light;
                      font-size: 24rpx;
                      color: #ffffff;
                      text-align: center;
                  }
                  .videoBtn{
                    position: absolute;
                    width: 80rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    top: 54rpx;
                    left: 54rpx;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
              }
            }
          }
          .contentVideo{
            width: 400rpx;
            height: 230rpx;
            margin-top: 20rpx;
            .videoBox{
              width: 100%;
              height: 100%;
              position: relative;
              video{
                width: 100%;
                height: 100%;
              }
              img{
                width: 100%;
                height: 100%;
              }
              .videoBtn{
                position: absolute;
                width: 80rpx;
                height: 80rpx;
                line-height: 80rpx;
                top: 75rpx;
                left: 160rpx;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .contentAudio{
            width: 586rpx;
            height: 120rpx;
            margin-top: 28rpx;
          }
        }

        .cellDiscuss{
          .discussButton{
            line-height: 1;
            padding-top: 20rpx;
            padding-bottom: 25rpx;
            display: inline-block;
            vertical-align: middle;
            margin-right: 22rpx;
            .discussIcon{
              display: inline-block;
              vertical-align: middle;
              width: 22.1rpx;
              height: 20.9rpx;
              line-height: 20.9rpx;
              // margin-right: 9.1rpx;
              img{
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .discussText{
              display: inline-block;
              vertical-align: middle;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #666666;
              letter-spacing: 0.67rpx;
              line-height: 1;
              margin-left: 9.1rpx;
            }
          }

          .opinionButton{
            line-height: 1;
            padding-top: 20rpx;
            padding-bottom: 25rpx;
            display: inline-block;
            vertical-align: middle;
            // margin-right: 22rpx;
            .opinionIcon{
              display: inline-block;
              vertical-align: middle;
              width: 18rpx;
              height: 23rpx;
              line-height: 23rpx;
              // margin-right: 9.1rpx;
              img{
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .opinionText{
              display: inline-block;
              vertical-align: middle;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #666666;
              letter-spacing: 0.67rpx;
              line-height: 1;
              margin-left: 8rpx;
            }
          }

          .shareButton{
            line-height: 1;
            padding-top: 20rpx;
            padding-bottom: 25rpx;
            display: inline-block;
            vertical-align: middle;
            .shareIcon{
              display: inline-block;
              vertical-align: middle;
              width: 22rpx;
              height: 21rpx;
              line-height: 21rpx;
              // margin-right: 9.1rpx;
              img{
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .shareText{
              display: inline-block;
              vertical-align: middle;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #666666;
              letter-spacing: 0.67rpx;
              line-height: 1;
              margin-left: 9.1rpx;
            }
          }
          .teacherReviews{
            font-family: PingFangSC-Regular;
            font-size: 26rpx;
            color: #999999;
            letter-spacing: 0.91rpx;
            line-height: 40rpx;
            background: rgba(255,180,151,0.20);
            border: 1rpx solid rgba(254,122,114,0.30);
            border-radius: 4rpx;
            padding: 20rpx;
            .teacherName{
              font-family: PingFangSC-Regular;
              font-size: 26rpx;
              color: #446191;
              letter-spacing: 1.29rpx;
              margin-right:5px;
            }
            .reviewsText{
              font-family: PingFangSC-Regular;
              font-size: 26rpx;
              color: #EBA844;
              letter-spacing: 1.29rpx;
            }
          }
          .commentContent{
            margin-top: 20rpx;
            background: #F5F5F5;
            padding: 20rpx;
            .commentLine{
              margin-top: 8rpx;
              div{
                font-family: PingFangSC-Regular;
                font-size: 26rpx;
                color: #151515;
                letter-spacing: 0.53rpx;
                line-height: 37rpx;
                span{
                  font-family: PingFangSC-Regular;
                  font-size: 26rpx;
                  color: #446191;
                  letter-spacing: 0.53rpx;
                }
              }
              .discussLine{}
              .replyLine{}
            }
          }
        }
      }
    }

    .commentRelease{
      display: flex;
      // align-items: flex-end; /*底部对齐*/
      align-items: center;
      justify-content: space-between; /*两端对齐*/
      box-sizing: border-box;
      position: fixed;
      // top: 686rpx;
      // bottom: 0;
      left: 0;
      width: 100%;
      padding: 18rpx 0 18rpx 30rpx;
      background-color: #F7F8F7;
      font-size: 28rpx;
      z-index: 999;
      .text{
        width: 604rpx;
        height: 20rpx;
        // min-height: 34rpx;
        // max-height: 102rpx; /*最多显示三行*/
        // border-width: 15rpx 20rpx; /*使用padding与预期留白不一致，故使用border*/
        border-style: solid;
        border-color:  #ffffff;
        line-height: 20rpx;
        font-size: 28rpx;
        background-color: #ffffff;
        border-radius: 4rpx;
      }
      .submit{
          width: 116rpx;
          height: 20rpx;
          line-height: 20rpx;
          text-align: center;
          color: #66CC00;
          padding: 15rpx 20rpx; /*使用padding与预期留白不一致，故使用border*/
      }
      .input_null{
          color: #C9C9C9;
      }
    }

    .commentFoot{
      position:fixed;
      bottom:0;
      width: 100%;
      text-align: center;
      height: 98rpx;
      line-height: 98rpx;
      background-image: linear-gradient(-90deg, #FFB497 0%, #FE7A72 100%);

      font-family: PingFangSC-Regular;
      font-size: 34rpx;
      color: #FFFFFF;
      letter-spacing: -0.66rpx;
      border-radius:0;
    }

    .shareModel{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 999999999999;
      .shareMask{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
        opacity: 0.7;
      }
      .shareContent{
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -104rpx;
        margin-left: -270rpx;
        width: 540rpx;
        height: 208rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        text-align: center;
        .shareTitle{
          font-family: PingFangSC-Regular;
          font-size: 34rpx;
          color: #333333;
          letter-spacing: -0.82rpx;
          height: 120rpx;
          line-height: 120rpx;
          // border-bottom: 2rpx solid #CCCCCC;
          background: #FFFFFF;
        }
        .shareSpace{
          width: 100%;
          height: 1rpx;
          background: #CCCCCC;
        }
        .shareButton{
          font-family: PingFangSC-Regular;
          font-size: 34rpx;
          color: #666666;
          letter-spacing: -0.82rpx;
          height: 87rpx;
          line-height: 87rpx;
          background: #FFFFFF;
        }
      }
    }

  .opinionModel{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 999999999999;
    .opinionMask{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #000;
      opacity: 0.7;
    }
    .opinionContent{
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -104rpx;
      margin-left: -270rpx;
      width: 540rpx;
      height: 208rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      text-align: center;
      .opinionTitle{
        font-family: PingFangSC-Regular;
        font-size: 34rpx;
        color: #333333;
        letter-spacing: -0.82rpx;
        height: 120rpx;
        line-height: 120rpx;
        // border-bottom: 2rpx solid #CCCCCC;
        background: #FFFFFF;
      }
      .opinionSpace{
        width: 100%;
        height: 1rpx;
        background: #CCCCCC;
      }
      .opinionDivide{
        font-family: PingFangSC-Regular;
        font-size: 34rpx;
        color: #666666;
        letter-spacing: -0.82rpx;  
        line-height: 1;
        background: #FFFFFF;
        width: 100%;
        .cancelDivide{
          display: inline-block;
          vertical-align: middle;
          width: 270rpx;
          text-align: center;
          height: 87rpx;
          line-height: 87rpx;
        }
        .divideSpace{
          display: inline-block;
          vertical-align: middle;
          width: 1rpx;
          // height: 100%;
          background: #CCCCCC;
          height: 87rpx;
          line-height: 87rpx;
        }
        .ensureDivide{
          display: inline-block;
          vertical-align: middle;
          color: #09BB07;
          width: 269rpx;
          text-align: center;
          height: 87rpx;
          line-height: 87rpx;
        }
      }
    }
  } 

    // .releaseModel{
    //   position: fixed;
    //   left: 0;
    //   right: 0;
    //   top: 0;
    //   bottom: 0;
    //   overflow: hidden;
    //   z-index: 999999999999;
    //   .releaseMask{
    //     position: fixed;
    //     left: 0;
    //     right: 0;
    //     top: 0;
    //     bottom: 0;
    //     background: #000;
    //     opacity: 0.7;
    //   }
    //   .releaseContent{
    //     display: flex;
    //     align-items: center;
    //     justify-content: space-between;
    //     box-sizing: border-box;
    //     position: fixed;
    //     left: 0;
    //     bottom: 0;
    //     width: 100%;
    //     padding: 18rpx 0 18rpx 30rpx;
    //     background-color: #F7F8F7;
    //     font-size: 28rpx;
    //     z-index: 999;
    //     .text{
    //       width: 604rpx;
    //       height: 20rpx;
    //       border-width: 15rpx 20rpx;
    //       border-style: solid;
    //       border-color:  #ffffff;
    //       line-height: 20rpx;
    //       font-size: 28rpx;
    //       background-color: #ffffff;
    //       border-radius: 4rpx;
    //     }
    //     .submit{
    //         width: 116rpx;
    //         height: 20rpx;
    //         line-height: 20rpx;
    //         text-align: center;
    //         color: #66CC00;
    //         padding: 15rpx 20rpx;
    //     }
    //     .input_null{
    //         color: #C9C9C9;
    //     }
    //   }
    // }
}
</style>
